<!--
 * @Author: HuRrongChao 1556810922@qq.com
 * @Date: 2025-03-13 23:03:30
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-03-14 21:51:45
-->
<template>
  <div class="container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-input
        v-model="searchText"
        placeholder="请输入学校名称"
        class="search-input"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="search-result" v-show="searchText && filteredSchools.length">
        <div 
          v-for="school in filteredSchools" 
          :key="school.code"
          class="school-item"
          @click="selectSchool(school)"
        >
          <span class="school-name">{{ school.name }}</span>
          <span class="school-code">{{ school.code }}</span>
        </div>
      </div>
    </div>

    <!-- 轮播图区域 -->
    <div class="slide" ref="slide">
      <div 
        v-for="(item, index) in slideItems" 
        :key="index" 
        class="item"
        :style="{ backgroundImage: `url('${item.image}')` }"
      >
        <div class="content">
          <div class="name">{{ item.name }}</div>
          <div class="description">{{ item.description }}</div>
          <button @click="handleSeeMore(item)">更多</button>
        </div>
      </div>
    </div>

    <div class="button">
      <button class="prev" ref="prev">
        <el-icon><Back /></el-icon>
      </button>
      <button class="next" ref="next">
        <el-icon><Right /></el-icon>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { Back, Right, Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import fosu from '@/assets/img/fosu.jpg'
import { ElMessage } from 'element-plus'

// 轮播数据
const slideItems = ref([
  {
    name: '华南师范大学',
    code: '10574',
    image: 'https://i.postimg.cc/DZfgR0s8/Finland.jpg',
    description: '华南师范大学是国家"211工程"重点建设大学、广东省和教育部共建高校，坐落于广州市。'
  },
  {
    name: '佛山大学',
    code: '11847',
    image: fosu,
    description: '国家硕士学位授予单位,全日制本科大学,坐落于国家历史文化名城—广东省佛山市。'
  },
  {
    name: '广州大学',
    code: '11078',
    image: 'https://www.gzhu.edu.cn/__local/F/6A/B4/6A4AEAE3DE2384502DD5D2BBA91_1A7994B8_75967.jpg',
    description: '广州大学是以国家重要中心城市"广州"命名的综合性大学,于2000年合并组建,有着90多年的办学传统。'
  },
  {
    name: '中山大学',
    code: '10558',
    image: 'https://www.sysu.edu.cn/images/weixintupian_20241101104604.jpg',
    description: '心怀国之大者 百年中大启新程'
  },
  {
    name: '华南理工大学',
    code: '10561',
    image: 'https://i.postimg.cc/dtg5DqMx/Netherland.jpg',
    description: '华南理工大学是直属教育部的全国重点大学,坐落在南方名城广州,占地面积294多万平方米。'
  }
])

const store = useStore()
const searchText = ref('')
const currentIndex = ref(1)
const slide = ref()
const next = ref()
const prev = ref()

// 根据搜索文本过滤学校
const filteredSchools = computed(() => {
  if (!searchText.value) return []
  const keyword = searchText.value.toLowerCase()
  return slideItems.value.filter(school => {
    if (!school) return false
    const nameMatch = school.name ? school.name.toLowerCase().includes(keyword) : false
    const codeMatch = school.code ? school.code.toString().includes(keyword) : false
    return nameMatch || codeMatch
  })
})

// 选择学校
const selectSchool = (school) => {
  // 查找选中学校在轮播图中的索引
  const items = document.querySelectorAll('.item')
  const index = Array.from(items).findIndex(item =>
    item.querySelector('.name').textContent === school.name
  )
  const currentFirst = Array.from(items).findIndex(item =>
    item.querySelector('.name').textContent === slideItems.value[currentIndex.value].name
  )
  if (index !== -1) {
    // 跳转到对应的轮播图
    const diff = index - currentFirst
    const temp = []
    if (diff > 0) {
      for (let i = 0; i < diff; i++) {
        temp.push(items[i])
        handleIndex('next')
      }
      slide.value.append(...temp)
    } else {
      for (let i = 0; i < -diff; i++) {
        temp.push(items[items.length - 1 - i])
        handleIndex('prev')
      }
      slide.value.prepend(...temp)
    }
  }
  setSchoolInfo(school)
  searchText.value = '' // 清空搜索框
}

// 设置学校信息
const setSchoolInfo = (school) => {
  store.commit('user/SET_SCHOOL_CODE', school.code)
  store.commit('user/SET_SCHOOL_NAME', school.name)
  ElMessage.success(`已选择：${school.name}`)
}

// 处理索引
const handleIndex = (type) => {
  const items = slideItems.value
  if (type === 'next') {
    currentIndex.value++
    if (currentIndex.value >= items.length) {
      currentIndex.value = 0
    }
  } else {
    currentIndex.value--
    if (currentIndex.value < 0) {
      currentIndex.value = items.length - 1
    }
  }
}

// 处理更多按钮点击
const handleSeeMore = (item) => {
  window.open(`https://www.fosu.edu.cn`, '_blank')
}

// 初始化轮播功能
const init = async() => {
  next.value.addEventListener('click', function () {
    let items = document.querySelectorAll('.item')
    slide.value.appendChild(items[0])
    handleIndex('next')
    setSchoolInfo(slideItems.value[currentIndex.value])
  })
  
  prev.value.addEventListener('click', function () {
    let items = document.querySelectorAll('.item')
    slide.value.prepend(items[items.length - 1])
    handleIndex('prev')
    setSchoolInfo(slideItems.value[currentIndex.value])
  })

  const curCode = store.state.user.school_code
  if (curCode) {
    await nextTick()
    selectSchool(slideItems.value.find(item => item.code === curCode))
  }
}

onMounted(init)
</script>

<style scoped>
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: #f5f5f5;
  box-shadow: 0 30px 50px #dbdbdb;
}

.container .slide .item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  /* background-position: 50% 50%; */
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  display: inline-block;
  transition: .5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.slide .item:nth-child(2) .content {
  display: block;
}

.slide .item:nth-child(3) {
  left: 50%;
}

.slide .item:nth-child(4) {
  left: calc(50% + 220px);
}

.slide .item:nth-child(5) {
  left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
  left: calc(50% + 440px);
  overflow: hidden;
}

.item .content {
  position: absolute;
  top: 50%;
  left: 100px;
  width: 300px;
  text-align: left;
  color: #eee;
  transform: translate(0, -50%);
  font-family: system-ui;
  display: none;
}

.content .name {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation: animate 1s ease-in-out 1 forwards;
}

.content .description {
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: animate 1s ease-in-out .3s 1 forwards;
}

.content button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: animate 1s ease-in-out .6s 1 forwards;
}

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

.button {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}

.button button {
  width: 40px;
  height: 35px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  border: 1px solid #000;
  background: #fff;
  transition: .3s;
}

.button button:hover {
  background: #ababab;
  color: #fff;
}

/* 添加搜索区域样式 */
.search-section {
  position: relative;
  width: 300px;
  margin: 20px auto;
  z-index: 100;
}

.search-input {
  width: 100%;
}

.search-result {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
}

.school-item {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.school-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.school-name {
  font-size: 14px;
  color: #333;
}

.school-code {
  font-size: 12px;
  color: #666;
}
</style>